<!-- 页面 -->
<template>
  <view class="ss-user-info-wrap ss-p-t-50 flex flex-column align-center" style="padding-top: 30rpx;">
    <view class="w-100 ss-flex ss-col-center ss-row-between ss-m-b-15">
      <view class="left-box ss-flex ss-col-center ss-m-l-24">
        <view class="avatar-box ss-m-r-24" style="position: relative;" @click.stop="goPage">
          <!--          <image-->
          <!--            class="avatar-img"-->
          <!--            :src="-->
          <!--              isLogin-->
          <!--                ? sheep.$url.cdn(userInfo.avatar)-->
          <!--                : sheep.$url.static('/assets/addons/shopro/uniapp/default_avatar.png')-->
          <!--            "-->
          <!--            mode="aspectFill"-->
          <!--            @tap="sheep.$router.go('/pages/user/info')"-->
          <!--          ></image>-->
          <image-avater
            :src="isLogin ? sheep.$url.cdn(userInfo.avatar) : sheep.$url.static('/assets/addons/shopro/uniapp/default_avatar.png')"
            :width="100" :height="100"></image-avater>
          <view class="personalHome_infoCard_all_left_info_name_edit flex align-center justify-center mt_14">
            <image :src="`${IMG_URL}/index/bianjiziliao.gif`" mode="widthFix"></image>
          </view>
        </view>
        <view>
          <view class="nickname-box flex flex-column">
            <view class="flex align-center">
              <view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
              <view v-if="!!userInfo.vip_end_time && new Date().getTime() / 1000 < userInfo.vip_end_time"
                    class="follow_button flex flex-row align-center justify-center bg_FF4206"
                    @tap="buttonClick('member')"
              >
                <image :src="`${IMG_URL}/index/user_vip_icon.png`" class="hW_26 wh_26"></image>
                <view class="text ml_5">{{ 'VIP会员' }}</view>
              </view>
              <view v-else-if="!!isLogin"
                    class="follow_button flex flex-row align-center justify-center bg_C1C1C1"
                    @tap="buttonClick('user')"
              >
                <image :src="`${IMG_URL}/index/user_ordinaryUser_icon.png`" class="hW_26 wh_26"></image>
                <view class="text ml_5">{{ '普通用户' }}</view>
              </view>
              <view v-if="!!isLogin && !!level"
                    class="follow_button flex flex-row align-center justify-center bg_FF4206 ml_5"
                    @tap="buttonClick('other',level)"
              >
                <image :src="`${IMG_URL}/index/user_vip_icon.png`" class="hW_26 wh_26"></image>
                <view class="text ml_5">{{ '联合创始人' }}</view>
              </view>
            </view>
            <s-block :styles="listStyle(15)"></s-block>
            <view class="flex flex-row align-center">
              <view class="nick-ID">拾亲号: {{ userInfo?.uid || '未登录' }}</view>
              <!--              <image v-if="!!userInfo.vip_end_time && new Date().getTime() / 1000 < userInfo.vip_end_time"-->
              <!--                     style="margin-left: 10rpx;" :style="setImageStyle(89,27)"-->
              <!--                     :src="`${nc_image_path}/nc_vip_icon.png`"></image>-->
            </view>
          </view>
        </view>
      </view>
      <view class="right-box flex flex-column align-center ss-m-r-24">
        <button class="ss-reset-button flex flex-column align-center" @tap="showQrCode">
          <image :style="setImageStyle(76,76)" :src="`${nc_image_path}/user_nc_qrcode.png`"></image>
          <view class="fs_18 color_9F9F9F" style="margin-top: -14rpx;">我的二维码</view>
        </button>
        <!--        <view class="fs_24 fw_500 mt_25" @tap="goPage">-->
        <!--          完善资料-->
        <!--        </view>-->
      </view>
    </view>
    <view class="follow_list flex flex-row align-center ss-m-b-40" style="margin-left: 296rpx;"
          v-if="!!userInfo.merchants && userInfo.merchants.length > 0">
      <view class="follow_button flex flex-row align-center justify-center ml_12"
            v-for="(item,index) in lv"
            :key="index"
            :class="item.level == 3 ? 'bg_FFC134':item.level == 4 ? 'bg_FF487F':item.level == 5 ? 'bg_CC8A00':'bg_4887FF'"
            @tap="buttonClick('other',item)"
      >
        <image
          :src="`${IMG_URL}/index/${item.level == 3 ? 'user_serviceProvider_icon' : item.level == 4 ? 'user_serviceCenter_icon':item.level == 5 ? 'user_operationCenter_icon':'user_subsidiaryCompany_icon'}.png`"
          class="hW_26 wh_26"
        ></image>
        <view class="text ml_5">{{ item.name }}</view>
      </view>
    </view>
    <view
      class="bind-mobile-box ss-flex ss-row-between ss-col-center"
      v-if="isLogin && !userInfo.verification?.mobile"
    >
      <view class="ss-flex">
        <text class="cicon-mobile-o"></text>
        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全</view>
      </view>
      <button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
    </view>
  </view>
</template>

<script setup>
  /**
   * 用户卡片
   *
   * @property {Number} leftSpace                  - 容器左间距
   * @property {Number} rightSpace                  - 容器右间距
   *
   * @property {String} avatar          - 头像
   * @property {String} nickname          - 昵称
   * @property {String} vip              - 等级
   * @property {String} collectNum        - 收藏数
   * @property {String} likeNum          - 点赞数
   *
   *
   */
  import { computed, reactive, unref } from 'vue';
  import sheep from '@/sheep';
  import { showShareModal, showAuthModal, closeShareModal } from '@/sheep/hooks/useModal';
  import SBlock from '@/sheep/components/s-block/s-block.vue';
  import dayjs from 'dayjs';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';

  // 用户信息
  const userInfo = computed(() => sheep.$store('user').userInfo);

  const lv = computed(() => {
    if (!!sheep.$store('user').userInfo.merchants && sheep.$store('user').userInfo.merchants.length > 0) {
      let arr = sheep.$store('user').userInfo.merchants.sort((a, b) => {
        return b.id - a.id;
      });
      console.log('用户类型=>', arr);
      return arr;
    } else {
      return [];
    }
  });

  const level = computed(() => {
    if (!!sheep.$store('user').userInfo.levels && sheep.$store('user').userInfo.levels.length > 0) {
      let obj = sheep.$store('user').userInfo.levels.find(item => item.level == 7);
      console.log('obj=>', obj);
      return obj;
    } else {
      return {};
    }
  });

  // 是否登录
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const setImageStyle = (width, height) => {
    return {
      'width': width + 'rpx',
      'height': height + 'rpx',
    };
  };
  const nc_image_path = computed(() => sheep.$store('AI').nc_image_path);
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const mp_code = computed(() => sheep.$store('AI').mp_code);
  const appVersion = computed(() => sheep.$store('app').info.worship_version);

  const listStyle = (number = 10) => {
    return {
      marginTop: uni.upx2px(number),
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0,
      'border-top-left-radius': 0,
      'border-top-right-radius': 0,
      'border-bottom-left-radius': 0,
      'border-bottom-right-radius': 0,
      padding: 0,
      overflow: 'hidden',
      background: {
        type: 'color',
        bgColor: '#F6F6F6',
      },
    };
  };
  // 接收参数
  const props = defineProps({
    background: {
      type: String,
      default: '',
    },
    // 头像
    avatar: {
      type: String,
      default: '',
    },
    nickname: {
      type: String,
      default: '请先登录',
    },
    vip: {
      type: [String, Number],
      default: '1',
    },
    collectNum: {
      type: [String, Number],
      default: '1',
    },
    likeNum: {
      type: [String, Number],
      default: '1',
    },
  });

  function onBind() {
    showAuthModal('changeMobile');
  }

  function goPage() {
    if (!isLogin.value) {
      uni.$emit('openLoginPopup');
      return;
    }
    sheep.$router.go('/pages/familyPage/personalData', { member_id: userInfo.value.member_id, is_use: 1 });
  }

  const buttonClick = (text, info = {}) => {
    // if (mp_code.value == appVersion.value) {
    //   return;
    // }
    switch (text) {
      case 'member':
        // 会员
        sheep.$router.go('/pages/vip/liberal')
        break;
      case 'user':
        // 普通用户
        sheep.$router.go('/pages/vip/liberal')
        break;
      case 'other':
        // 其他
        sheep.$store('user').setIntroInfo({
          type: 'other',
          info,
        });
        sheep.$store('user').setIntroType(false);
        showAuthModal('textView');
        break;
    }

  };

  function showQrCode() {
    uni.$emit('setQrCode');
  }
</script>

<style lang="scss" scoped>
  .ss-user-info-wrap {
    box-sizing: border-box;

    .avatar-box {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      //overflow: hidden;

      .avatar-img {
        width: 100%;
        height: 100%;
      }
    }

    .nick-name {
      font-size: 34rpx;
      font-weight: 400;
      color: #000000;
      line-height: normal;
    }

    .nick-ID {
      font-family: PingFang SC, PingFang SC;
      font-weight: 300;
      font-size: 24rpx;
      color: #9F9F9F;
    }

    .vip-img {
      width: 30rpx;
      height: 30rpx;
    }

    .sicon-qrcode {
      font-size: 40rpx;
    }
  }

  .bind-mobile-box {
    width: 100%;
    height: 84rpx;
    padding: 0 34rpx 0 44rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);

    .cicon-mobile-o {
      font-size: 30rpx;
      color: #ff690d;
    }

    .mobile-title {
      font-size: 24rpx;
      font-weight: 500;
      color: #ff690d;
    }

    .bind-btn {
      width: 100rpx;
      height: 50rpx;
      background: #ff6100;
      border-radius: 25rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #ffffff;
    }
  }

  .follow_list {
    width: 100%;
  }

  .follow_button {
    padding: 0 10rpx;
    height: 42rpx;
    border-radius: 5rpx 5rpx 5rpx 5rpx;

    .text {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 24rpx;
      color: #FFFFFF;
      line-height: 28rpx;
    }
  }

  .nickname-box {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #000000;
  }


  .personalHome_infoCard_all_left_info_name_edit {
    position: absolute;
    left: 50%;
    top: 65rpx;
    transform: translateX(-50%);
    width: 100rpx;
    //height: 50rpx;
    //background: #FF7950;
    border-radius: 25rpx 25rpx 25rpx 25rpx;

    //.personalHome_infoCard_all_left_info_name_edit_text {
    //  font-family: PingFang SC, PingFang SC;
    //  font-weight: 500;
    //  font-size: 18rpx;
    //  color: #FFFFFF;
    //}
    image {
      width: 100rpx;
      //height: 50rpx;
    }
  }
</style>
